<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col group">
			<view class="fun-flex-col section_3">
				<view class="fun-flex-row fun-justify-between fun-items-center group_2">
					<text class="font text_3">Dollar Amount</text>
					<text class="font_2 text_4">${{withdrawalInfo.putAmount}}</text>
				</view>
				<view class="fun-flex-row fun-justify-between fun-items-center group_3">
					<text class="font_3 text_5">Type of transaction</text>
					<text class="font_4 text_6">Withdrawal</text>
				</view>
				
				<view class="fun-flex-row fun-justify-between fun-items-center group_4">
					<text class="font text_7">Transaction Fee</text>
					<text class="font_2 text_8">${{withdrawalInfo.serviceAmount}}</text>
				</view>
				
				<view class="fun-flex-row fun-justify-between fun-items-center group_3">
					<text class="font text_9">Actual Amount</text>
					<text class="font_5 text_10">{{withdrawalInfo.amount}} {{withdrawalInfo.showCurrency}}</text>
				</view>
				
				<view class="fun-flex-row fun-justify-between fun-items-center group_3">
					<text class="font text_11">Protocal</text>
					<text class="font_4 text_12">{{withdrawalInfo.protocol}}</text>
				</view>
			</view>
			
			<view class="fun-mt-22 fun-flex-col section_4">
				<view class="fun-flex-row fun-justify-between fun-items-center group_5">
					<text class="font">Transaction Status</text>
					<view class="status progress" v-if='withdrawalInfo.status == 1 || withdrawalInfo.status == 5'>{{withdrawalInfo.status | withdrawStatus}}</view>
					<view class="status completed" v-if='withdrawalInfo.status == 6'>{{withdrawalInfo.status | withdrawStatus}}</view>
					<view class="status failed" v-if='withdrawalInfo.status == 7 || withdrawalInfo.status == 8'>{{withdrawalInfo.status | withdrawStatus}}</view>
				</view>
				
				<view class="divider"></view>
				<view class="divider_2 view"></view>
				<view class="fun-flex-row fun-justify-between group_6">
					<text class="font">Order Number</text>
					<text class="font_4 text_14">{{withdrawalInfo.orderNo}}</text>
				</view>
				<view class="divider_2 view_2"></view>
				<view class="fun-flex-row fun-items-center fun-justify-between group_7">
					<text class="font">Address</text>
					<text class="address">{{withdrawalInfo.address}}</text>
				</view>
				<view class="divider_2 view_3"></view>
				<view class="fun-flex-row fun-justify-between group_8">
					<text class="font">Creation Time</text>
					<text class="font_4 text_17">{{UTILS.setDateFormat(withdrawalInfo.createAt)}}</text>
				</view>
				
				<template>
					<view class="fun-flex-row fun-justify-between group_8" v-if='withdrawalInfo.status == 7 || withdrawalInfo.status == 8'>
						<text class="font">Expiry Time</text>
						<text class="font_4 text_17">{{UTILS.setDateFormat(withdrawalInfo.riskAt)}}</text>
					</view>
					
					<view class="fun-flex-row fun-justify-between group_8" v-if='withdrawalInfo.status == 6'>
						<text class="font">Completed Time</text>
						<text class="font_4 text_17">{{UTILS.setDateFormat(withdrawalInfo.doneAt)}}</text>
					</view>
					
					<view class="fun-flex-row fun-justify-between group_8" v-if='withdrawalInfo.status == 6'>
						<text class="font">TxID</text>
						<text class="font_4 text_17">{{withdrawalInfo.txHash}}</text>
					</view>
				</template>
				
				<view class="divider_2 view_4"></view>
				
				<view class="progress-con" @click="isShowProgress = !isShowProgress">
					<text class="title">Progress</text>
					<image src="@/static/account/arrow_down.png" v-show='isShowProgress'/>
					<image src="@/static/account/arrow_up.png"  v-show='!isShowProgress'/>
				</view>
				
				<view class="divider_2 view_5"></view>
				
				<view class="progress-wrap" v-show="isShowProgress">
					<view>
						<view class="progress">
							<view class="left">
								<image src="@/static/account/current.png" />
								<text class="step">Order Created </text>
							</view>
							<text class="right">{{withdrawalInfo.createAt && withdrawalInfo.createAt.slice(5)}}</text>
						</view>
						
						<view class="split-line"></view>
					</view>
					
					<view>
						<view class="progress">
							<view class="left">
								<image src="@/static/account/next_step.png" v-if='withdrawalInfo.status == 1'/>
								<image src="@/static/account/current.png" v-else/>
								<text class="step">Risk Assessment</text>
							</view>
							<text class="right">{{withdrawalInfo.riskAt && withdrawalInfo.riskAt.slice(5)}}</text>
						</view>
						<view class="split-line"></view>
					</view>
					
					<view>
						<view class="progress">
							<view class="left">
								<image src="@/static/account/next_step.png" v-if='withdrawalInfo.status == 1'/>
								<image src="@/static/account/current.png" v-else/>
								<text class="step">Processing Time</text>
							</view>
							<text class="right">{{withdrawalInfo.processAt && withdrawalInfo.processAt.slice(5)}}</text>
						</view>
						<view class="split-line"></view>
					</view>
					
					<view>
						<view class="progress">
							<view class="left">
								<image src="@/static/account/next_step.png"v-if='withdrawalInfo.status == 1 || withdrawalInfo.status == 7'/>
								<image src="@/static/account/current.png" v-else/>
								<text class="step">Transfer Initiated</text>
							</view>
							<text class="right">{{withdrawalInfo.apiTime && withdrawalInfo.apiTime.slice(5)}}</text>
						</view>
						<view class="split-line"></view>
					</view>
					
					<view>
						<view class="progress">
							<view class="left">
								<image src="@/static/account/current.png" v-if='withdrawalInfo.status == 6'/>
								<image src="@/static/account/next_step.png" v-else/>
								<text class="step">Completion Time</text>
							</view>
							<text class="right">{{withdrawalInfo.doneAt && withdrawalInfo.doneAt.slice(5)}}</text>
						</view>
					</view>
				</view>
			</view> 
		</view>
		<view class="fun-flex-col fun-items-center group_14">
			<text class="font_3 text_27">Have questions about the deal?</text>
			<view class="fun-mt-14  text-wrapper_2" @click="enquiry">Enquiry</view>
		</view>
	</view>
</template>

<script>
	import {withdrawalOrderInfo} from "@/api/account.js"
	export default {
		data() {
			return {
				queryDate:{
					orderId:"",
					timeZone:8
				},
				withdrawalInfo:{},
				isShowProgress:true
			};
		},
		
		onLoad(option) {
			this.queryDate.timeZone = this.UTILS.getTimeZone() || 8;
			this.queryDate.orderId = this.UTILS.stringToNum(decodeURIComponent(option.orderId)) || null;
			this.getWithdrawalOrderInfo()
		},
		methods: {
			getWithdrawalOrderInfo(){
				withdrawalOrderInfo(this.queryDate).then(res => {
					if(res.code == 0){
						this.withdrawalInfo = res.data || {};
					}
					else{
						this.UTILS.logStr(res.msg || "Failed to retrieve data")
					}
				})
			},
			
			enquiry(){
				uni.navigateTo({url:'/pages/more/contactUs'})
			}
		},
	};
</script>

<style scoped lang="scss">
	.ml-7 {
		margin-left: 14rpx;
	}

	.ml-9 {
		margin-left: 18rpx;
	}

	.ml-5 {
		margin-left: 10rpx;
	}
	.page {
		padding-bottom: 120rpx;
		background-color: #ffffff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;
		.group {
			padding: 40rpx 30rpx 0 30rpx;
			.section_3 {
				padding: 0 28rpx;
				background-color: #f6f6f6;
				border-radius: 20rpx;

				.group_2 {
					padding: 24rpx 0;
					border-bottom: solid 2rpx #b0b1bf24;

					.text_4 {
						font-weight: 700;
					}
				}

				.group_3 {
					padding: 28rpx 0;
					border-bottom: solid 2rpx #b0b1bf24;
				}

				.group_4 {
					padding: 14px 0;
					border-bottom: solid 2rpx #b0b1bf24;
				}
			}

			.section_4 {
				padding-left: 28rpx;
				padding-right: 28rpx;
				padding-bottom: 92rpx;
				background-color: #f6f6f6;
				border-radius: 20rpx;

				.group_5 {
					padding: 42rpx 4rpx 18rpx;
					.status {
						width: 188rpx;
						height: 40rpx;
						text-align: center;
						line-height: 40rpx;
						border-radius: 4rpx;
						font-weight: 500;
					}
					
					.progress{
						color: #8C7F44;
						background: #FDF0BA;
					}
					
					.completed{
						color: #51844D;
						background: #E9FAF0;
					}
					
					.failed{
						color: #CA5456;
						background: rgba(255,146,165,0.3);
					}
				}

				.divider {
					margin-right: 24rpx;
					background-color: #ffffff24;
					height: 2rpx;
				}

				.divider_2 {
					background-color: #b0b1bf24;
					height: 2rpx;
				}

				.view {
					margin: 10rpx 22rpx 0 4rpx;
				}

				.group_6 {
					padding: 32rpx 4rpx;

				}

				.view_2 {
					margin-left: 4rpx;
					margin-right: 22rpx;
				}

				.group_7 {
					padding: 32rpx 0;
					.address{
						flex: 0.9;
						white-space: nowrap; /* 确保文本在一行内显示 */
						overflow: hidden; /* 超出容器部分隐藏 */
						text-overflow: ellipsis;
					}
				}

				.view_3 {
					margin-right: 28rpx;
				}

				.group_8 {
					padding: 28rpx 8rpx 36rpx;

				}

				.view_4 {
					margin-left: 4rpx;
					margin-right: 22rpx;
				}

				.progress-con {
					display: flex;
					align-items: center;
					justify-content: space-between;
					padding: 32rpx 8rpx;
					.title {
						font-weight: 600;
					}
					image {
						width: 32rpx;
						height: 32rpx;
					}
				}

				.view_5 {
					margin-left: 6rpx;
					margin-right: 20rpx;
				}

				.progress-wrap {
					margin-top: 24rpx;
					.progress{
						display: flex;
						align-items: center;
						justify-content: space-between;
					}
					.left{
						display: flex;
						align-items: center;
						image {
							width: 32rpx;
							height: 32rpx;
						}
						.step{
							font-size: 28rpx;
							line-height: 32rpx;
							margin-left: 16rpx;
						}
					}
					.right{
						font-size: 24rpx;
						color: #999;
					}
					
					.split-line {
						margin-left: 14rpx;
						background-color: #7f7f7f;
						width: 2rpx;
						height: 52rpx;
					}

					.group_11 {
						margin-top: 8rpx;

						.right{
							font-size: 24rpx;
							color: #999;
						}
					}

					.group_12 {
						margin-right: 24rpx;
						margin-top: 8rpx;
					}

					.font_7 {
						font-size: 24rpx;
						font-family: SF Pro Display;
						font-weight: 300;
						color: #000000;
					}

					.text_20 {
						opacity: 0.5;
					}

					.text_23 {
						margin-left: 16rpx;
					}

					.text_24 {
						margin-right: 24rpx;
					}

					.text_25 {
						margin-left: 8rpx;
					}

					.section_6 {
						margin-left: 14rpx;
						background-color: #d9d9d9;
						width: 2rpx;
						height: 52rpx;
					}

					.text_26 {
						color: #d9d9d9;
					}

					.group_13 {
						margin-right: 28rpx;
						margin-top: 60rpx;

						.font_8 {
							font-size: 24rpx;
							font-family: SF Pro Display;
							font-weight: 300;
							color: #f6f6f6;
						}
					}
				}
			}

			.font {
				font-size: 28rpx;
				font-family: SF Pro Display;
				color: #7f7f7f;
			}

			.font_4 {
				font-size: 28rpx;
				font-family: SF Pro Display;
				color: #000000;
			}

			.font_5 {
				font-size: 28rpx;
				font-family: SF Pro Display;
				font-weight: 700;
				color: #000000;
			}
		}

		.group_14 {
			margin-top: 84rpx;
			.text-wrapper_2 {
				padding: 16rpx 0 12rpx;
				background-color: #ffffff33;
				border-radius: 24rpx;
				width: 188rpx;
				border: solid 2rpx #7f7f7f;
				text-align: center;
			}
		}

		.font_3 {
			font-size: 28rpx;
			font-family: SF Pro Display;
			color: #7f7f7f;
		}
	}
</style>